<template>
  <div id="left-nav">
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      text-color="#BFBFBF"
      active-text-color="#fff"
    >
    <router-link v-for="(list, index) in listData" :key="list.value" :to="'/CustomerManage/' + list.value">
      <el-menu-item :index="index.toString()">
        <span>{{list.title}}</span>
      </el-menu-item>
    </router-link>
      <!-- <el-menu-item v-for="(list, index) in listData" :key="list.value" :index="index.toString()">
        <router-link :to="'/customerManage/' + list.value">{{list.title}}</router-link>
      </el-menu-item> -->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "LeftNavigation",
  props: {
    listData: Array,
  },
};
</script>

<style scoped>
#left-nav {
  width: 192px;
  background: url(../assets/images/left_navigation_background.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 24px 2px;
  font-size: 16px;
  font-weight: bold;
  margin-left: 8px;
}
.el-menu-item {
  text-align: center;
  height: 48px;
  line-height: 48px;
}
.el-menu-vertical-demo {
  border-right: none;
  background-color: rgb(5, 33, 83, 0);
}
.el-menu-item:hover,
.el-menu-item.is-active {
  background-color: #224079;
}
</style>